import React, { Component } from 'react';
import IceContainer from '@icedesign/container';
import { Tab, Feedback } from '@icedesign/base';
import CustomTable from './components/CustomTable';
import EditDialog from './components/EditDialog';
import DeleteBalloon from './components/DeleteBalloon';
// import data from './data';
import Ajax from '../../../../Ajax/index';
import Api from '../../../../Api/Api';

const TabPane = Tab.TabPane;

const tabs = [
  { tab: '正在使用', key: 'using' },
  { tab: '历史使用', key: 'used' },
  // { tab: '已发布', key: 'released' },
  // { tab: '已拒绝', key: 'rejected' },
];

export default class TabTable extends Component {
  static displayName = 'TabTable';

  static propTypes = {};

  static defaultProps = {};

  constructor(props) {
    super(props);
    this.state = {
      dataSource: {},
      tabKey: 'using',
    };
    this.columns = [
      {
        title: '广告介绍',
        dataIndex: 'title',
        key: 'title',
      },
      {
        title: '广告所属公司',
        dataIndex: 'author',
        key: 'author',
      },
      {
        title: '广告地址',
        dataIndex: 'src',
        key: 'status',
      },
      {
        title: '发布时间',
        dataIndex: 'date',
        key: 'date',
      },
      {
        title: '操作',
        key: 'action',
        render: (value, index, record) => {
          return (
            <span>
              <EditDialog
                index={index}
                record={record}
                getFormValues={this.getFormValues}
              />
              <DeleteBalloon
                handleRemove={() => this.handleRemove(value, index, record)}
              />
            </span>
          );
        },
      },
    ];
  }

  componentDidMount() {
    var url = Api.getAdvert();
    Ajax.get(url)
      .then((res) => {
        if (res.data.code) {
          this.setState({
            dataSource: res.data.data
          })
          // console.log(res.data);
        }
      })
  }

  getFormValues = (dataIndex, values) => {
    const { dataSource, tabKey } = this.state;
    dataSource[tabKey][dataIndex] = values;
    this.setState({
      dataSource,
    });
  };

  handleRemove = (value, index) => {
    const { dataSource, tabKey } = this.state;
    // console.log(dataSource[tabKey][index]['_id']);
    var obj = {
      id: dataSource[tabKey][index]['_id']
    };
    var url = Api.deleteAdvert(obj);
    Ajax.get(url)
      .then((res) => {
        if (res.data.code) {
          dataSource[tabKey].splice(index, 1);
          this.setState({
            dataSource,
          });
        } else {
          console.log('删除失败')
        }
      })
  };

  handleTabChange = (key) => {
    this.setState({
      tabKey: key,
    });
  };

  render() {
    const { dataSource } = this.state;
    return (
      <div className="tab-table">
        <IceContainer>
          <Tab onChange={this.handleTabChange}>
            {tabs.map((item) => {
              return (
                <TabPane tab={item.tab} key={item.key}>
                  <CustomTable
                    dataSource={dataSource[this.state.tabKey]}
                    columns={this.columns}
                    hasBorder={false}
                  />
                </TabPane>
              );
            })}
          </Tab>
        </IceContainer>
      </div>
    );
  }
}
